import React, { Suspense } from "react";
import { Layout, Button, Card, Divider, Input, Row, Col, Icon, Tabs, message, Modal, Drawer, Tooltip } from "antd";
import Header from "@/layouts/Header";
import { connect } from "dva";
import moment from "moment";
import RcViewer from "@hanyk/rc-viewer";

import styles from "./index.less";
import UserSession from "@/UserSession";
import robotDataClass from "./robotDataClass";
import axios from 'axios';

import { ellipsis } from "@/utils/utils";
import { robotCategoryList } from "@/services/robotManagement";
import { fakeStreamChatRecordList, fakeStreamChatRecordDetailList, fakeStreamChatRecordDel } from "@/services/chatGPT";
import KnowledgeConfiguration from "./KnowledgeConfiguration";
import HotQuestion from "./hotQuestion";

const { Content, Sider } = Layout;
const { TabPane } = Tabs;
const { TextArea } = Input;
const { confirm } = Modal;

import BD from "@/assets/chatGPT/bd.png";
import TP from "@/assets/chatGPT/tP.jpg";
import logo from "@/assets/logo.png";
import homeBg from "@/assets/chatGPT/b.png";
import I1 from "@/assets/chatGPT/l.png";
import S1 from "@/assets/chatGPT/s.png";
import C0 from "@/assets/chatGPT/c0.png";
import C1 from "@/assets/chatGPT/c1.png";
import C1C from "@/assets/chatGPT/c1c.png";
import C2 from "@/assets/chatGPT/c2.png";
import C2C from "@/assets/chatGPT/c2c.png";
import C3 from "@/assets/chatGPT/c3.png";
import S0 from "@/assets/chatGPT/s0.png";
import AD0 from "@/assets/chatGPT/ad0.png";
import moreImg from "@/assets/chatGPT/more.png";
import J1 from "@/assets/chatGPT/j1.png";
import J2 from "@/assets/chatGPT/j2.png";
import J3 from "@/assets/chatGPT/j3.png";
import J4 from "@/assets/chatGPT/j4.png";
import J5 from "@/assets/chatGPT/j5.png";
import J6 from "@/assets/chatGPT/j6.png";
import J7 from "@/assets/chatGPT/j7.png";

class Custom extends React.Component {
	state = {
		infoType: 0, 			// 初始化 
		tabActive: -1,
		quesionList: [], 		// 会话列表
		messages: [],  			// 问答数据列表
		question: "", 			// 当前输入的问题
		sessionId: null, 		// 会话ID
		userInfo: {				// 用户信息
			applicationId: '',
			userId: '',
			sessionId: '',
			robotId: ''
		},
		customerId: '',
		bindId: '',
		webSettingInfo: null, 	// 应用数据
		hotQaListWeb: [],		// 热点问题
		knowledgeList: [], 		// 知识库列表
		disabled: false,
		streamData: null,
		open: false,
		answerDataDetail: null,
	};

	componentDidMount() {
		this.getHistoryList();
		var sessionId = 'ChatId-' + robotDataClass.createMessageID();
		this.setState({ sessionId }, () => this.getApplicationId());
	}

	/** 左侧·历史记录 */

	// 历史会话列表
	getHistoryList = async () => {
		let res = await fakeStreamChatRecordList({ current: 1, size: 100 });
		console.log(res);
		this.setState({ quesionList: res.records });
	}

	// 切换会话
	setTabChange = (index, item) => {
		const { userInfo: { applicationId, userId, robotId } } = this.state;
		let userInfo = { applicationId, userId, robotId, sessionId: item.sessionId };
		this.setState({ tabActive: index, sessionId: item.sessionId, userInfo, messages: [] }, () => {
			this.setSessionData(item.sessionId);
		})
	}

	// 对应会话的历史问答记录
	setSessionData = async (sessionId) => {
		const { userInfo: { userId, robotId } } = this.state;
		let { messages } = this.state;
		let res = await fakeStreamChatRecordDetailList({ sessionId });
		// console.log(res);
		robotDataClass.hisyorySessionData(res && res.length > 0 ? res.reverse() : [], sessionId, userId, message => {
			messages.push(message);
			this.setState({ messages }, () => robotDataClass.scrollToBottom())
		})
	}

	/** 左侧·结束 */


	// 新建会话
	addSessionData = () => {
		const { userInfo: { applicationId, userId, robotId } } = this.state;
		var sessionId = 'ChatId-' + robotDataClass.createMessageID();
		let userInfo = { applicationId, userId, robotId, sessionId };
		this.setState({ sessionId, userInfo, messages: [], infoType: 0 }, () => {
			this.apiInitRobot();
		});
	}

	// 删除会话数据
	delSessionData = (e, item) => {
		e.preventDefault();
		const { userInfo: { sessionId } } = this.state;
		let that = this;
		confirm({
			title: "删除会话",
			content: "是否确定删除此会话记录？",
			okText: "确认",
			cancelText: "取消",
			onOk: async () => {
				let res = await fakeStreamChatRecordDel({ sessionId: item.sessionId });
				console.log(res);
				if (res.code === 0) {
					message.info('操作成功');
					that.getHistoryList();
					if (item.sessionId === sessionId) {
						that.addSessionData();
					}
				}
			},
			onCancel() { },
		});
	}

	// 获取应用Id
	getApplicationId = () => {
		const { sessionId } = this.state;
		const { currentUser } = this.props;
		robotDataClass.getApplicationId({}, res => {
			console.log(res);
			if (res.data.code === 0) {
				let { applicationId, userId, robotId } = res.data.data;
				this.setState({ userInfo: { applicationId, userId, robotId, sessionId } }, () => this.getRobotCategoryList());
				let params = {
					applicationId: applicationId,
					userId: userId,
				};
				robotDataClass.getWebSettingInfoByApplicationId(params, res1 => {
					console.log(res1);
					let { hotQaListWeb, webSettingInfo } = res1.data.data;
					this.setState({ hotQaListWeb, webSettingInfo });
				});
				this.apiInitRobot();
			}
		})
	};

	// 引擎初始化
	apiInitRobot = () => {
		let chat_question = localStorage.getItem("chat_question");
		let chat_session = localStorage.getItem("chat_session");
		let tab_active = localStorage.getItem("tab_active");

		const { sessionId, messages, userInfo: { userId, robotId } } = this.state;
		let data = { initData: { USER_TYPE: null, USER_TYPR_ID: null, }, robotId, sessionId, userId, };
		robotDataClass.apiInitRobot(sessionId, data, robotId, res => {
			if (chat_session && chat_session != '') {
				let sessionItem = JSON.parse(chat_session);
				console.log(sessionItem);
				this.setTabChange(Number(tab_active), sessionItem);
				localStorage.setItem('chat_session', '');
			} else {
				if (chat_question && chat_question != '') {
					this.setState({ question: chat_question }, () => {
						this.sendMessage(() => this.getHistoryList());
						localStorage.setItem('chat_question', '');
					});
				} else {
					robotDataClass.startStreaming('qizhi_welcome', userId, sessionId, robotId, null, ovl => {
						if (ovl.type == 'error') {
							messages.push({
								messageDirection: 'U',
								messageType: 'T',
								messageContent: ovl.data,
								chatId: ovl.id,
							});
							this.setState({ streamData: ovl, messages, disabled: false }, () => robotDataClass.scrollToBottom());
						} else {
							robotDataClass.onSetAnswer(JSON.parse(ovl.data), sessionId, userId, message => {
								messages.push(message);
								this.setState({ messages, tabActive: -1 }, () => robotDataClass.scrollToTop());
							});
						}

					});
				};
			}
		});
	};

	setQuestion = e => {
		this.setState({ question: e.target.value })
	}

	sendMessage = (callback) => {
		const { userInfo: { applicationId, userId, robotId, sessionId } } = this.state;
		let { messages, question, infoType } = this.state;
		if (question && question != '') {
			robotDataClass.onSetQuestion(question, sessionId, messageQ => {
				messages.push(messageQ);
				this.setState({ messages, question: undefined, disabled: true }, () => {
					robotDataClass.scrollToBottom();
					let answer = '', type = 0;
					infoType += 1;

					robotDataClass.startStreaming(question, userId, sessionId, robotId, null, res => {
						if (res.type == 'final') {
							if (callback) { callback() };
							if (infoType === 1) { this.getHistoryList() };
							if (type === 0) {
								robotDataClass.onSetAnswer(JSON.parse(res.data), sessionId, userId, messageA => {
									console.log('流式问答-·-完整数据===>', messageA);
									messages.push(messageA);
								});
							} else {
								robotDataClass.onSetAnswerInfo(JSON.parse(res.data), sessionId, userId, messageA => {
									console.log('流式问答-·-完整数据===>', messageA);
									messages[messages.length - 1] = {
										...messageA,
										answerContent: messageA.messageContent,
										messageContent: messages[messages.length - 1].messageContent,
										chatId: res.id,
									};
								});
							};

							this.setState({ streamData: null, messages, infoType, disabled: false }, () => robotDataClass.scrollToBottom());
						} else if (res.type == 'start') {
							type = 1;
							messages.push({
								messageDirection: 'U',
								messageType: 'T',
								messageContent: answer,
								chatId: res.id,
							});
							this.setState({ streamData: res, messages, infoType, disabled: true }, () => robotDataClass.scrollToBottom());
						} else if (res.type == 'error') {
							messages.push({
								messageDirection: 'U',
								messageType: 'T',
								messageContent: res.data,
								chatId: res.id,
							});
							this.setState({ streamData: res, messages, infoType, disabled: false }, () => robotDataClass.scrollToBottom());
						} else {
							answer += res.data;
							let answerDataText = answer.replace(/\n/g, '<br />');
							let reg = /\]\((.*?)\)/g;
							let dd = answerDataText.match(reg);

							let answerText = answerDataText;

							let regs = /\!\[.*?\]\((.*?)\)/g;
							let dds = answerDataText.match(regs);

							if (dd && dd.length > 0) {
								dd.map((item, j) => {
									let temp = item.replace(/(.*)\)/, '$1');
									temp = temp.replace('](', '');
									answerText = answerText.replace(dds[j], `<img src='${temp}' />`);
								})
							}

							messages[messages.length - 1].messageContent = answerText;
							this.setState({ messages, infoType, disabled: true }, () => robotDataClass.scrollToBottom())
						}
					});
				});
			});
		}
	}

	loadHistoryMessages = () => {
		const { sessionId, customerId, bindId, messages } = this.state;
		robotDataClass.getRobotHistoryMessage(null, sessionId, customerId, bindId, messages, res => {
			console.log(res);
		})
	}

	// 关联问-发送问题
	sendContent = text => {
		this.setState({ question: text }, () => this.sendMessage())
	}

	/** 右侧 · 知识配置功能 */
	// 右侧知识配置
	getRobotCategoryList = async () => {
		const { userInfo: { applicationId } } = this.state;
		let res = await robotCategoryList({ applicationId, current: 1, size: 99999 });
		// console.log(res);
		this.setState({ knowledgeList: res.records });
	}

	// 配置知识点
	configureKnowledge = item => {
		if (this.KnowledgeConfiguration) {
			this.KnowledgeConfiguration.info(item)
		}
	};
	/** 右侧功能·结束 */

	// 复制答案
	copy = index => {
		let text = document.getElementById(`AnswerText${index}`);
		if (document.body.createTextRange) {
			var range = document.body.createTextRange();
			range.moveToElementText(text);
			range.select();
		} else if (window.getSelection) {
			let selection = window.getSelection();
			let range = document.createRange();
			range.selectNodeContents(text);
			selection.removeAllRanges();
			selection.addRange(range);
		};
		document.execCommand('Copy');
		message.success('复制成功！');
	}
	// 有无帮助
	evaluateRobotAnswer = (solveStatus, index, item) => {
		const { userInfo: { robotId } } = this.state;
		let { messages } = this.state;
		robotDataClass.apiEvaluateRobotAnswer(solveStatus, robotId, item, res => {
			// console.log(res);
			messages[index].solveStatus = res;
			this.setState({ messages });
		})
	}
	// 停止生成
	stopGenerate = () => {
		const { streamData } = this.state;
		if (streamData && streamData.id != '') {
			robotDataClass.stopStreaming(streamData.id, () => {
				this.setState({ streamData: null }, () => {
					robotDataClass.closeSource(() => {
						setTimeout(() => {
							this.setState({ disabled: false })
						}, 150)
					})
				})
			})
		}
	}
	// 重新生成
	regeneration = (item, index) => {
		const { userInfo: { userId, robotId, sessionId }, disabled } = this.state;
		let { messages } = this.state;
		let answer = '';
		if (disabled) {
			robotDataClass.stopStreaming(item.chatId, () => {
				robotDataClass.startStreaming(messages[index - 1].messageContent, userId, sessionId, robotId, item.chatId, res => {
					if (res.type == 'final') {
						if (index === 1) { this.getHistoryList() };
						robotDataClass.onSetAnswerInfo(JSON.parse(res.data), sessionId, userId, message => {
							messages[index] = {
								...message,
								answerContent: message.messageContent,
								messageContent: messages[index].messageContent,
								chatId: res.id,
							};
						});
						this.setState({ streamData: null, messages, disabled: false }, () => robotDataClass.scrollToBottom());
					} else if (res.type == 'start') {
						messages[index] = {
							messageDirection: 'U',
							messageType: 'T',
							messageContent: answer,
							chatId: res.id,
						};
						this.setState({ streamData: res, messages, disabled: true }, () => robotDataClass.scrollToBottom());
					} else if (res.type == 'error') {
						messages.push({
							messageDirection: 'U',
							messageType: 'T',
							messageContent: res.data,
							chatId: res.id,
						});
						this.setState({ streamData: res, messages, disabled: false }, () => robotDataClass.scrollToBottom());
					} else {
						answer += res.data;

						let answerDataText = answer.replace(/\n/g, '<br />');
						let reg = /\]\((.*?)\)/g;
						let dd = answerDataText.match(reg);

						let answerText = answerDataText;

						let regs = /\!\[.*?\]\((.*?)\)/g;
						let dds = answerDataText.match(regs);

						if (dd && dd.length > 0) {
							dd.map((item, j) => {
								let temp = item.replace(/(.*)\)/, '$1');
								temp = temp.replace('](', '');
								answerText = answerText.replace(dds[j], `<img src='${temp}' />`);
							})
						}

						messages[index].messageContent = answerText;
						this.setState({ messages, disabled: true }, () => robotDataClass.scrollToBottom())
					}
				});
			})
		} else {
			robotDataClass.startStreaming(messages[index - 1].messageContent, userId, sessionId, robotId, item.chatId, res => {
				if (res.type == 'final') {
					if (index === 1) { this.getHistoryList() };
					robotDataClass.onSetAnswerInfo(JSON.parse(res.data), sessionId, userId, message => {
						messages[index] = {
							...message,
							answerContent: message.messageContent,
							messageContent: messages[index].messageContent,
							chatId: res.id,
						};
					});
					this.setState({ streamData: null, messages, disabled: false }, () => robotDataClass.scrollToBottom());
				} else if (res.type == 'start') {
					messages[index] = {
						messageDirection: 'U',
						messageType: 'T',
						messageContent: answer,
						chatId: res.id,
					};
					this.setState({ streamData: res, messages, disabled: true }, () => robotDataClass.scrollToBottom());
				} else if (res.type == 'error') {
					messages.push({
						messageDirection: 'U',
						messageType: 'T',
						messageContent: res.data,
						chatId: res.id,
					});
					this.setState({ streamData: res, messages, disabled: false }, () => robotDataClass.scrollToBottom());
				} else {
					answer += res.data;

					let answerDataText = answer.replace(/\n/g, '<br />');
					let reg = /\]\((.*?)\)/g;
					let dd = answerDataText.match(reg);

					let answerText = answerDataText;

					let regs = /\!\[.*?\]\((.*?)\)/g;
					let dds = answerDataText.match(regs);

					if (dd && dd.length > 0) {
						dd.map((item, j) => {
							let temp = item.replace(/(.*)\)/, '$1');
							temp = temp.replace('](', '');
							answerText = answerText.replace(dds[j], `<img src='${temp}' />`);
						})
					}

					messages[index].messageContent = answerText;
					this.setState({ messages, disabled: true }, () => robotDataClass.scrollToBottom())
				}
			});
		}
	}

	showDrawer = (data) => {
		const { userInfo: { applicationId } } = this.state;
		let params = { id: data.paraId, type: data.type, applicationId };
		robotDataClass.getAnswerDataDetail(params, res => {
			if (res.data.code === 0) {
				let content = res.data.data && res.data.data.content ? res.data.data.content : "";
				let answerDataText = content.replace(/\n/g, '<br />');
				let reg = /\]\((.*?)\)/g;
				let dd = answerDataText.match(reg);

				let answerText = answerDataText;

				let regs = /\!\[.*?\]\((.*?)\)/g;
				let dds = answerDataText.match(regs);

				if (dd && dd.length > 0) {
					dd.map((item, j) => {
						let temp = item.replace(/(.*)\)/, '$1');
						temp = temp.replace('](', '');
						answerText = answerText.replace(dds[j], `<img src='${temp}' style='max-width: 100%;' />`);
					})
				}

				let Detail = { ...res.data.data, content: answerText };
				this.setState({ answerDataDetail: Detail, open: true })
			}
		})
	}

	onClose = () => {
		this.setState({ open: false })
	};

	render() {
		const { tabActive, quesionList, question, messages, webSettingInfo, hotQaListWeb, knowledgeList, userInfo: { applicationId, robotId }, disabled, open, answerDataDetail } = this.state;

		return (
			<div className={styles.customLayoutBox}>
				<Layout style={{ minHeight: "100vh" }}>
					<Header logo={logo} isHome={true} />
					<Content className={styles.content}>
						<div style={{ height: 'calc(100vh - 64px)', margin: '-16px' }}>
							<div style={{ display: 'flex', justifyContent: 'center', height: '100%' }}>
								<div style={{ width: '100%', height: '100%' }}>
									<div style={{ width: '480px', height: '100%', float: 'left' }}>
										<div style={{ width: '100%', height: '70px', background: `url(${J4}) no-repeat`, backgroundSize: '100%' }}></div>
									</div>
									<div style={{ position: 'fixed', top: '64px', left: 0, bottom: 0, right: 0 }}>
										<div style={{ display: 'flex', justifyContent: 'center', height: '100%' }}>
											<div className={styles.leftCard}>
												<div className={styles.leftCard_header}>
													<span style={{ display: 'inline-flex', alignItems: 'center' }}>
														{/* <Icon type="clock-circle" /> */}
														<img src={J6} height="16" />
														<span style={{ marginLeft: 5, color: '#000000', fontSize: '14px' }}>历史会话</span>
													</span>
													<span style={{ cursor: disabled ? 'not-allowed' : 'pointer' }} onClick={disabled ? null : () => this.addSessionData()}>
														{/* <Icon type="plus" /> */}
														<Tooltip title="新建会话">
															<img src={J5} height="24" />
														</Tooltip>

														{/* <span style={{ marginLeft: 5 }}>新建会话</span> */}
													</span>
												</div>
												<div className={styles.leftCard_contentList}>
													<div className={styles.leftCard_content_List}>
														{quesionList && quesionList.length > 0 ? quesionList.map((item, index) => {
															return (
																<div
																	key={index}
																	className={tabActive === index ? [styles.leftCard_contentLi_active] : [styles.leftCard_contentLi]}
																	onClick={() => this.setTabChange(index, item)}
																>
																	<div>
																		<p style={{ margin: 0, fontSize: '14px', fontWeight: 500, wordBreak: "break-all", textOverflow: "ellipsis", display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: '2', overflow: "hidden" }} className={styles.historyQa}>{item.question}</p>
																		<p className={styles.leftCard_li_time} style={{ height: '16px', alignItems: 'center' }}>
																			<span style={{ color: '#666666', fontSize: '12px' }}>
																				{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}
																				{/* {moment().format('YYYY-MM-DD')} */}
																			</span>
																			<span onClick={event => this.delSessionData(event, item)}>
																				<Icon type="delete" style={{ fontSize: '13px', color: '#666666' }} />
																			</span>
																		</p>
																	</div>
																	{/* <Divider style={{ color: '#FFF', margin: 0, opacity: 0.3 }} /> */}
																</div>
															)
														}) : null}
													</div>
												</div>
											</div>
											<div className={styles.bodyCard} style={{ flex: 1, borderRadius: '12px', position: 'relative', background: `url(${homeBg}) no-repeat`, backgroundSize: '100% 100%' }}>
												<div style={{ padding: '0 12px 0 66px', height: '100%', }}>
													<div style={{ maxWidth: '980px', height: '100%', margin: ' 0 auto', padding: '20px 0px', position: 'relative' }}>
														<div style={{ marginLeft: -54, overflowX: 'clip', height: '100%', fontWeight: 500, color: '#000' }}>
															<div className={`${styles["smartnlp-chat-msg-content"]} contentDiv Message`}>
																{/* <div className={styles["smartnlp-chatRecord"]}>
																	<a onClick={() => this.loadHistoryMessages()}>点击加载更多</a>
																</div> */}
																<ul className={styles["smartnlp-msg-history-list"]} ref={(el) => { this.messagesEnd = el; }}>
																	{messages && messages.length > 0 ? messages.map((item, index) => {
																		return (
																			<li key={index}>
																				{/* 时间戳 */}

																				{/* 系统消息 */}

																				{/* 用户-->客服 */}
																				{item.messageDirection === "C" ? (
																					<div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
																						<div style={{ display: 'flex', marginRight: 12 }}>
																							<img src="/robotConfigImg/user.png" width="42" />
																						</div>
																						<div>
																							<p id={"AnswerText" + index}>{item.messageContent}</p>
																						</div>
																					</div>
																				) : null}

																				{/* 客服-->用户 */}
																				{item.messageDirection === "U" ? (
																					<div style={{ display: 'flex', marginBottom: 20 }}>
																						<div style={{ display: 'flex', marginRight: 12, height: '49px' }}>
																							<img src="/robotConfigImg/robot.png" width="42" />
																						</div>
																						<div style={{ maxWidth: 'calc(100% - 54px)' }}>
																							<div style={{ padding: 12, borderRadius: '12px', background: '#FFF', display: 'inline-block', width: '100%' }} >
																								{item.messageType === 'T' ? (
																									<>
																										<div id={"AnswerText" + index} className={styles["smartnlp-msg-answer"]}>
																											<p dangerouslySetInnerHTML={{ __html: item.messageContent }} />
																										</div>
																										<div className={styles["smartnlp-msg-bottom"]}>
																											{item.answerContent && JSON.parse(item.answerContent).answerGenerateType && JSON.parse(item.answerContent).answerGenerateType === 'ROBOT_QA' ? (
																												<span style={{ color: '#8FC31F', padding: '5px 10px', background: '#8FC31F33', borderRadius: '6px' }}>
																													<Icon type="info-circle" />
																													<span style={{ marginLeft: 8 }}>本答案来自于本地知识库，点击查看命中的知识点。</span>
																												</span>
																											) : item.answerContent && JSON.parse(item.answerContent).answerGenerateType && JSON.parse(item.answerContent).answerGenerateType === 'ROBOT_CORPUS_GEN' ? (
																												<span style={{ color: '#0088FB', padding: '5px 10px', background: '#42AAFF33', borderRadius: '6px' }}>
																													<Icon type="info-circle" />
																													<span style={{ marginLeft: 8 }}>本答案基于<span style={{ fontWeight: 'bold' }}>本地知识库和文档库</span>，由AI汇总回答，请谨慎参考。点击查看参考的信息源。</span>
																												</span>
																											) : item.answerContent && JSON.parse(item.answerContent).answerGenerateType && JSON.parse(item.answerContent).answerGenerateType === 'ROBOT_GEN' ? (
																												<span style={{ color: '#F45B4E', padding: '5px 10px', background: '#F45B4E3D', borderRadius: '6px' }}>
																													<Icon type="info-circle" />
																													<span style={{ marginLeft: 8 }}>本答案基于互联网信息，由AI自动生成，不代表本公司观点，仅供参考。</span>
																												</span>
																											) : (
																												<span style={{ color: '#000000', opacity: 0.4 }}>
																													<Icon type="info-circle" />
																													<span style={{ marginLeft: 8 }}>以上内容为AI生成，不代表本公司观点。</span>
																												</span>
																											)}
																											<span className={styles.PJicon} style={{ marginLeft: 20 }}>
																												<Tooltip title="重新生成">
																													<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.regeneration(item, index)}> <img src={C0} width="16" /> </span>
																												</Tooltip>
																												{robotDataClass.isJSON(item.answerContent && JSON.parse(item.answerContent).showResolveStatusLabel) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? (
																													<>
																														{!item.solveStatus || item.solveStatus == '1' ? (
																															<>
																																<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={disabled ? null : () => this.evaluateRobotAnswer('2', index, item)}> <img src={C1} width="16" /> </span>
																																<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={disabled ? null : () => this.evaluateRobotAnswer('3', index, item)}> <img src={C2} width="16" /> </span>
																															</>
																														) : null}
																														{item.solveStatus == '2' ? (
																															<span style={{ marginRight: 8 }}> <img src={C1C} width="16" /> </span>
																														) : null}
																														{item.solveStatus == '3' ? (
																															<span style={{ marginRight: 8 }}> <img src={C2C} width="16" /> </span>
																														) : null}
																													</>
																												) : null}
																												<Tooltip title="复制">
																													<span style={{ cursor: 'pointer' }} onClick={() => this.copy(index)}> <img src={C3} width="16" /> </span>
																												</Tooltip>
																											</span>
																										</div>
																										{item.answerContent && JSON.parse(item.answerContent).answerDataSourceParagraphList && JSON.parse(item.answerContent).answerDataSourceParagraphList.length > 0 ? (
																											<>
																												<Divider style={{ margin: '10px 0 3px' }} />
																												<div className={styles['answer-card-show']}>
																													<span style={{ fontWeight: 'bold', color: '#333333', padding: '5px 0 0', whiteSpace: 'nowrap' }}>了解详情</span>
																													<span className={styles['answer-card-ul']}>
																														{JSON.parse(item.answerContent).answerDataSourceParagraphList.map((answerItemType, answerItemIndex) => {
																															return (
																																<span className={styles['answer-card-li']} key={answerItemIndex} onClick={() => this.showDrawer(answerItemType)}>{answerItemType.title}</span>
																															)
																														})}
																														{/* <span className={styles['answer-card-li']} style={{ background: '#EEEEEE', padding: '5px 14px', display: 'flex', alignItems: 'center', width: 'min-content', height: '34px' }}>
																															<img src={moreImg} />
																														</span> */}
																													</span>
																												</div>
																											</>
																										) : null}
																									</>
																								) : (
																									<>
																										{item.showType() ? (
																											<div>
																												<div id={"AnswerText" + index} className={webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? `${styles["smartnlp-msg-answer"]}` : `${styles["smartnlp-msg-answer"]} ${styles["smartnlp-msg-content"]}`}>
																													<RcViewer>
																														<p
																															dangerouslySetInnerHTML={{ __html: item.getHtml() }}
																															style={webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? null : { margin: 0 }}
																														/>
																													</RcViewer>
																												</div>
																												{JSON.parse(item.messageContent).choices && JSON.parse(item.messageContent).choices.length > 0 ? (
																													<div className={styles["smartnlp-common-content1"]}>
																														<ul style={{ padding: 0 }}>
																															{JSON.parse(item.messageContent).choices.map((questionText, questionIndex) => {
																																return (
																																	<li key={questionIndex} onClick={() => this.sendContent(questionText)} style={{ display: 'flex', alignItems: 'center' }}>
																																		<span style={{ display: 'flex', marginRight: 5 }}> <img src={TP} width="18" /> </span>
																																		<a style={{ padding: '4px 0px' }}>{questionText}</a>
																																	</li>
																																)
																															})}
																														</ul>
																													</div>
																												) : null}
																												{JSON.parse(item.messageContent).suggestions && JSON.parse(item.messageContent).suggestions.length > 0 ? (
																													<div className={styles["smartnlp-common-content"]}>
																														{JSON.parse(item.messageContent).mainQuestion != 'qizhi_welcome' ? (
																															<p>我猜您可能关心以下问题，点击即可：</p>
																														) : null}
																														<ul style={{ padding: 0 }}>
																															{JSON.parse(item.messageContent).suggestions.map((questionText, questionIndex) => {
																																return (
																																	<li key={questionIndex} onClick={() => this.sendContent(questionText)} style={{ display: 'flex', alignItems: 'center' }}>
																																		<span style={{ display: 'flex', marginRight: 5 }}> <img src={TP} width="18" /> </span>
																																		<a style={{ padding: '4px 0px' }}>{questionText}</a>
																																	</li>
																																)
																															})}
																														</ul>
																													</div>
																												) : null}
																											</div>
																										) : (
																											<div id={"AnswerText" + index} className={webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? `${styles["smartnlp-msg-answer"]}` : `${styles["smartnlp-msg-answer"]} ${styles["smartnlp-msg-content"]}`}>
																												<RcViewer>
																													<p
																														dangerouslySetInnerHTML={{ __html: item.getHtml() }}
																														style={(item.showResolveStatusLabel || (robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).showResolveStatusLabel)) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? null : { margin: 0 }}
																													/>
																												</RcViewer>
																											</div>
																										)}
																										{robotDataClass.isJSON(item.messageContent) ? (
																											<div className={styles["smartnlp-msg-bottom"]}>
																												{item.messageContent && JSON.parse(item.messageContent).answerGenerateType && JSON.parse(item.messageContent).answerGenerateType === 'ROBOT_QA' ? (
																													<>
																														{JSON.parse(item.messageContent).answerDataSourceParagraphList && JSON.parse(item.messageContent).answerDataSourceParagraphList.length > 0 ? (
																															<>
																																<span style={{ color: '#8FC31F', padding: '5px 10px', background: '#8FC31F33', borderRadius: '6px' }}>
																																	<Icon type="info-circle" />
																																	<span style={{ marginLeft: 8 }}>本答案来自于本地知识库，点击查看命中的知识点。</span>
																																</span>
																																<span className={styles.PJicon}>
																																	{/* <span style={{ marginRight: 8, cursor: 'pointer' }}> <img src={C0} width="16" /> </span> */}
																																	{(item.showResolveStatusLabel || (robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).showResolveStatusLabel)) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? (
																																		<>
																																			{item.solveStatus == '1' ? (
																																				<>
																																					<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('2', index, item)}> <img src={C1} width="16" /> </span>
																																					<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('3', index, item)}> <img src={C2} width="16" /> </span>
																																				</>
																																			) : null}
																																			{item.solveStatus == '2' ? (
																																				<span style={{ marginRight: 8 }}> <img src={C1C} width="16" /> </span>
																																			) : null}
																																			{item.solveStatus == '3' ? (
																																				<span style={{ marginRight: 8 }}> <img src={C2C} width="16" /> </span>
																																			) : null}
																																		</>
																																	) : null}
																																	<Tooltip title="复制">
																																		<span style={{ cursor: 'pointer' }} onClick={() => this.copy(index)}> <img src={C3} width="16" /> </span>
																																	</Tooltip>
																																</span>
																															</>
																														) : null}
																													</>
																												) : item.messageContent && JSON.parse(item.messageContent).answerGenerateType && JSON.parse(item.messageContent).answerGenerateType === 'ROBOT_CORPUS_GEN' ? (
																													<>
																														<span style={{ color: '#0088FB', padding: '5px 10px', background: '#42AAFF33', borderRadius: '6px', marginTop: '1em' }}>
																															<Icon type="info-circle" />
																															<span style={{ marginLeft: 8 }}>本答案基于<span style={{ fontWeight: 'bold' }}>本地知识库和文档库</span>，由AI汇总回答，请谨慎参考。点击查看参考的信息源。</span>
																														</span>
																														<span className={styles.PJicon} style={{ marginTop: '1em' }}>
																															{/* <span style={{ marginRight: 8, cursor: 'pointer' }}> <img src={C0} width="16" /> </span> */}
																															{(item.showResolveStatusLabel || (robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).showResolveStatusLabel)) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? (
																																<>
																																	{item.solveStatus == '1' ? (
																																		<>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('2', index, item)}> <img src={C1} width="16" /> </span>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('3', index, item)}> <img src={C2} width="16" /> </span>
																																		</>
																																	) : null}
																																	{item.solveStatus == '2' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C1C} width="16" /> </span>
																																	) : null}
																																	{item.solveStatus == '3' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C2C} width="16" /> </span>
																																	) : null}
																																</>
																															) : null}
																															<Tooltip title="复制">
																																<span style={{ cursor: 'pointer' }} onClick={() => this.copy(index)}> <img src={C3} width="16" /> </span>
																															</Tooltip>
																														</span>
																													</>
																												) : item.messageContent && JSON.parse(item.messageContent).answerGenerateType && JSON.parse(item.messageContent).answerGenerateType === 'ROBOT_GEN' ? (
																													<>
																														<span style={{ color: '#F45B4E', padding: '5px 10px', background: '#F45B4E3D', borderRadius: '6px', marginTop: '1em' }}>
																															<Icon type="info-circle" />
																															<span style={{ marginLeft: 8 }}>本答案基于互联网信息，由AI自动生成，不代表本公司观点，仅供参考。</span>
																														</span>
																														<span className={styles.PJicon} style={{ marginTop: '1em' }}>
																															{/* <span style={{ marginRight: 8, cursor: 'pointer' }}> <img src={C0} width="16" /> </span> */}
																															{(item.showResolveStatusLabel || (robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).showResolveStatusLabel)) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? (
																																<>
																																	{item.solveStatus == '1' ? (
																																		<>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('2', index, item)}> <img src={C1} width="16" /> </span>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('3', index, item)}> <img src={C2} width="16" /> </span>
																																		</>
																																	) : null}
																																	{item.solveStatus == '2' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C1C} width="16" /> </span>
																																	) : null}
																																	{item.solveStatus == '3' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C2C} width="16" /> </span>
																																	) : null}
																																</>
																															) : null}
																															<Tooltip title="复制">
																																<span style={{ cursor: 'pointer' }} onClick={() => this.copy(index)}> <img src={C3} width="16" /> </span>
																															</Tooltip>
																														</span>
																													</>
																												) : (
																													<>
																														<span style={{ color: '#000000', opacity: 0.4, marginTop: '1em' }}>
																															{/* <Icon type="info-circle" /> */}
																															{/* <span style={{ marginLeft: 8 }}>以上内容为AI生成，不代表本公司观点。</span> */}
																														</span>
																														<span className={styles.PJicon} style={{ marginTop: '1em' }}>
																															{/* <span style={{ marginRight: 8, cursor: 'pointer' }}> <img src={C0} width="16" /> </span> */}
																															{(item.showResolveStatusLabel || (robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).showResolveStatusLabel)) && webSettingInfo && webSettingInfo.solveFlag == 1 && item.solveStatus != null ? (
																																<>
																																	{item.solveStatus == '1' ? (
																																		<>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('2', index, item)}> <img src={C1} width="16" /> </span>
																																			<span style={{ marginRight: 8, cursor: 'pointer' }} onClick={() => this.evaluateRobotAnswer('3', index, item)}> <img src={C2} width="16" /> </span>
																																		</>
																																	) : null}
																																	{item.solveStatus == '2' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C1C} width="16" /> </span>
																																	) : null}
																																	{item.solveStatus == '3' ? (
																																		<span style={{ marginRight: 8 }}> <img src={C2C} width="16" /> </span>
																																	) : null}
																																</>
																															) : null}
																															<Tooltip title="复制">
																																<span style={{ cursor: 'pointer' }} onClick={() => this.copy(index)}> <img src={C3} width="16" /> </span>
																															</Tooltip>
																														</span>
																													</>
																												)}
																											</div>
																										) : null}
																										{item.messageContent && JSON.parse(item.messageContent).answerDataSourceParagraphList && JSON.parse(item.messageContent).answerDataSourceParagraphList.length > 0 ? (
																											<>
																												<Divider style={{ margin: '10px 0 3px' }} />
																												<div className={styles['answer-card-show']}>
																													<span style={{ fontWeight: 'bold', color: '#333333', padding: '5px 0 0', whiteSpace: 'nowrap' }}>了解详情</span>
																													<span className={styles['answer-card-ul']}>
																														{JSON.parse(item.messageContent).answerDataSourceParagraphList.map((answerItemType, answerItemIndex) => {
																															return (
																																<span className={styles['answer-card-li']} key={answerItemIndex} onClick={() => this.showDrawer(answerItemType)}>{answerItemType.title}</span>
																															)
																														})}
																														{/* <span className={styles['answer-card-li']} style={{ background: '#EEEEEE', padding: '5px 14px', display: 'flex', alignItems: 'center', width: 'min-content', height: '34px' }}>
																															<img src={moreImg} />
																														</span> */}
																													</span>
																												</div>
																											</>
																										) : null}
																									</>
																								)}
																							</div>
																							{robotDataClass.isJSON(item.messageContent) && JSON.parse(item.messageContent).mainQuestion === 'qizhi_welcome' && hotQaListWeb.length > 0 ? (
																								<HotQuestion hotQaListWeb={hotQaListWeb} robotId={robotId} sendContent={this.sendContent} />
																							) : null}
																						</div>
																					</div>
																				) : null}
																			</li>
																		)
																	}) : null}
																</ul>
															</div>
														</div>
														<div className={styles["smartnlp-msg-footer"]}>
															<div>
																<div className={styles["smartnlp-msg-footer-tagList"]}>
																	<span
																		className={styles["smartnlp-msg-footer-tag"]}
																		style={{ cursor: disabled ? 'pointer' : 'not-allowed' }}
																		onClick={disabled ? () => this.stopGenerate() : null}
																	>
																		<img src={S0} width="16" />
																		<span style={{ marginLeft: 8 }}>停止生成</span>
																	</span>
																	<span
																		className={styles["smartnlp-msg-footer-tag"]}
																		style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
																		onClick={disabled ? null : () => this.addSessionData()}
																	>
																		<img src={AD0} width="16" />
																		<span style={{ marginLeft: 8 }}>新建会话</span>
																	</span>
																</div>
															</div>
															<div className={styles.chatQuestion}>
																<TextArea
																	placeholder="在此输入您想了解的内容，按回车键进行发送~"
																	value={question}
																	onChange={this.setQuestion}
																	onPressEnter={e => {
																		e.preventDefault();
																		this.sendMessage();
																	}}
																	rows={3}
																	ref={function (input) {
																		if (input != null) {
																			input.focus();
																		}
																	}}
																	// maxLength={}
																	disabled={disabled}
																	style={{ borderStyle: 'none', boxShadow: 'none' }}
																/>
																<div onClick={() => this.sendMessage()}> <img src={S1} width="30" /> </div>
															</div>
														</div>
													</div>
												</div>
												<Drawer
													title={<span style={{ fontSize: '16px' }}>{answerDataDetail?.title}</span>}
													placement="bottom"
													onClose={this.onClose}
													visible={this.state.open}
													getContainer={false}
													style={{ position: 'absolute' }}
													closable
													height={'56%'}
												>
													<p
														style={{ fontWeight: 500, color: '#000000', textAlign: 'justify', fontSize: '16px' }}
														dangerouslySetInnerHTML={{ __html: answerDataDetail?.content?.replace(/\n/g, '<br />') }}
													/>
												</Drawer>
											</div>
											<div className={styles.rightCard}>
												{/* <div style={{ height: '260px' }}></div> */}
												{/* <Divider style={{ color: '#F0F0F0', margin: 0, opacity: 0.9 }} /> */}
												<div style={{ padding: '12px 12px 0', display: 'flex', alignItems: 'center', userSelect: 'none' }}>
													<span style={{ padding: 7, display: 'flex', background: '#F5F6F9', borderRadius: '5px' }}>
														<img src={BD} width="15" />
													</span>
													<span style={{ marginLeft: 12, fontSize: '16px', fontWeight: 'bold' }}>本地知识库</span>
												</div>
												<div>
													<div className={styles.rightCard_contentList}>
														<div className={styles.rightCard_content_List}>
															{knowledgeList && knowledgeList.length > 0 ? knowledgeList.map((item, index) => {
																return (
																	<div
																		className={styles.rightCard_contentLi}
																		style={{
																			background: `url(${index % 3 == 0 ? J1 : index % 3 == 1 ? J2 : index % 3 == 2 ? J3 : J1
																				}) no-repeat`,
																			backgroundSize: '100%',
																			color: '#FFF',
																			cursor: 'pointer',
																		}}
																		key={index}
																		onClick={() => this.configureKnowledge(item)}
																	>
																		<div style={{ flex: 1 }}>
																			<div className={styles.titleName} style={{ marginBottom: 3 }} title={ellipsis(item.name, item.name.length)}>
																				{ellipsis(item.name, 8)}
																			</div>
																			<div style={{ background: '#0000003d', fontSize: '14px', borderRadius: '12px', padding: '3px 10px', width: 'fit-content' }}>
																				{item.isAll == 0 ? "还未选择" : item.isAll == 1 ? "已选部分" : "已选全部"}
																			</div>
																		</div>
																		<span>
																			{/* <span style={{ background: item.isAll == 0 ? "#FF3444" : item.isAll == 1 ? "#F39800" : "#22AC38", }}>
																				{item.isAll == 0 ? "还未选择" : item.isAll == 1 ? "已选部分" : "已选全部"}
																			</span> */}
																			<Icon type="right" />
																		</span>
																	</div>
																)
															}) : null}
														</div>
													</div>
													<KnowledgeConfiguration
														robotId={robotId}
														applicationId={applicationId}
														getRobotCategoryList={this.getRobotCategoryList}
														onRef={ref => (this.KnowledgeConfiguration = ref)}
													/>
												</div>
											</div>
										</div>
									</div>
									<div style={{ width: '320px', background: '#FFF', float: 'right', height: '100%' }}></div>
								</div>
							</div>
						</div>
					</Content>
				</Layout>
			</div>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Custom);
